<template>
  <div>
    <el-table class="tl-table" ref="mainTable" height="300px" v-loading="loading" :data="datas" @sort-change="doSortChange" @row-dblclick="doRowDbClick" row-key="id" border fit>
      <el-table-column type="index" label="序号" width="55px" align="center"> </el-table-column>
      <el-table-column prop="dispnodeid" label="流程节点" :show-overflow-tooltip="true" width="150px"></el-table-column>
      <el-table-column prop="dispapprovaluserid" label="审批人" width="100px"></el-table-column>
      <el-table-column prop="dispstate" label="状态" width="100px"></el-table-column>
      <el-table-column prop="startdate" label="开始时间" width="160px" sortable="custom" sort-by="startdate"></el-table-column>
      <el-table-column prop="planenddate" label="到期时间" width="160px" sortable="custom" sort-by="planenddate"></el-table-column>
      <el-table-column prop="approvaldate" label="审批日期" width="160px" sortable="custom" sort-by="approvaldate"></el-table-column>
      <el-table-column prop="realday" label="实际用时" width="100px" sortable="custom" align="center" sort-by="realday"></el-table-column>
      <el-table-column prop="approvalopinion" label="审批意见" :show-overflow-tooltip="true" width="150px"></el-table-column>
      <el-table-column prop="approvalexplain" label="审批说明" :show-overflow-tooltip="true" width="150px"></el-table-column>
      <el-table-column prop="dispflowid" label="流程" :show-overflow-tooltip="true" width="150px"></el-table-column>
      <el-table-column prop="maintitle" label="主题" :show-overflow-tooltip="true" width="150px"></el-table-column>
      <el-table-column prop="description" label="备注" :show-overflow-tooltip="true" width="150px"></el-table-column>
    </el-table>
    <!-- 列表分页 -->
    <el-row class="pagebar" ref="pager">
      <el-pagination @size-change="doChangeSize" @current-change="doChangeIndex" :current-page="pageInfo.currentPage" :page-sizes="pageInfo.pageSizes" :total="pageInfo.totalCount" layout="total, sizes, prev, pager, next, jumper" background class="tl-table-pagination"> </el-pagination>
    </el-row>
    <tl-edit-approval-node-ins ref="editFormNodeIns" @refresh="doRefresh"></tl-edit-approval-node-ins>
  </div>
</template>

<script>
/** 子组件 */
import topscommConst from '@tapui/const/tapConst'
import { validateNull } from '@tapui/utils/validate'
import tlEditApprovalNodeIns from './editApprovalNodeIns'
/** 工具类 */
import { putAction, getAction, postAction, deleteAction } from '@tapui/utils/http'
/** VUE配置 */
export default {
  components: { tlEditApprovalNodeIns },
  data() {
    return {
      urlPrefix: '/cbo/approvalFlowIns/',
      url: {
        // 额外的url
        list: '/cbo/approvalNodeIns/list'
      },
      sorterInfo: {
        // 排序参数
        // sidx: 'createon',
        // sord: 'asc'
        sidx: 'createon desc,id',
        sord: 'desc'
      },
      datas: [],
      pageInfo: {
        // 分页参数
        currentPage: 1, // 当前页面
        pageSize: 10, // 每页记录数
        pageSizes: ['10', '50', '100'],
        totalCount: 0 // 总数
      },
      loading: false
    }
  },
  props: {
    sourceId: {
      type: Number,
      default: 0,
      required: true
    },
    sourceType: {
      type: String,
      default: '',
      required: true
    }
  },
  methods: {
    open() {
      this.loadData({ currentPage: 1 })
    },
    loaded() {
      // 页面加载完毕执行
    },
    /** 加载数据 */
    loadData(paramMap) {
      if (validateNull(paramMap) === false && Object.keys(paramMap).indexOf('currentPage') > -1) {
        this.pageInfo.currentPage = paramMap['currentPage']
      }
      // 查询条件
      var params = this.getQueryParams()
      // 数据查询
      this.loading = true
      getAction(this.url.list, params)
        .then((res) => {
          if (res.success) {
            this.datas = res.result.dataList
            this.pageInfo.totalCount = res.result.totalCount
          } else {
            this.$tap.alert(res.message, 'warning')
          }
          this.loading = false
        })
        .catch((err) => {
          this.loading = false
        })
    },
    /** 执行查询 */
    doQuery() {
      this.loadData({ currentPage: 1 })
    },
    /** 获取查询参数 */
    getQueryParams() {
      let param = {
        qry_sourcetype: this.sourceType,
        qry_sourceid: this.sourceId
      }
      Object.assign(param, this.sorterInfo)
      param.currentPage = this.pageInfo.currentPage
      param.pageSize = this.pageInfo.pageSize
      return param
    },
    /** 表格列排序 */
    doSortChange(columnInfo, prop, order) {
      if (columnInfo.column === null) {
        return
      }
      // 不排序
      if (validateNull(columnInfo.order)) {
        this.loadData({})
        return
      }
      // 升序或者降序排序
      if (columnInfo.column.sortBy) {
        this.sorterInfo.sidx = columnInfo.column.sortBy
      } else {
        this.sorterInfo.sidx = columnInfo.prop
      }
      this.sorterInfo.sord = columnInfo.order.replace('ending', '')
      this.loadData({})
    },
    /** 每页大小改变 */
    doChangeSize(val) {
      if (this.pageInfo.pageSize !== val) {
        this.pageInfo.pageSize = val
        this.pageInfo.currentPage = 1
        this.loadData({})
      }
    },
    /** 页面跳转 */
    doChangeIndex(val) {
      if (this.pageInfo.currentPage !== val) {
        this.pageInfo.currentPage = val
        this.loadData({})
      }
    },
    doRowDbClick(row, column, event) {
      this.openEditDialog('editFormNodeIns', row.id)
    },
    openEditDialog(editFormNodeIns, id) {
      this.$refs[editFormNodeIns].id = id
      this.$refs[editFormNodeIns].isAdd = false
      this.$refs[editFormNodeIns].disableEditSubmit = false
      this.$refs[editFormNodeIns].visible = true
    },
    doRefresh() {
      this.loadData({})
    }
  }
}
</script>
